<template>
  <label class="bbq-check"
       @click="change">
    <span
        class="check-area"
        :class="{'is-checked': isCheck}">
    </span>
    <span class="title">
      <slot></slot>
    </span>
  </label>
</template>

<script lang="ts">
import {computed, inject, defineComponent} from "vue";

export default defineComponent(
    {
      name: "bbq-check",
      props: {
        flag: {
          type: [String, Number],
          default: '',
        },
      },
      setup(props,ctx){
        const checkBox: any = inject('checkGroup')

        //provide 动态绑定的值 如果用inject接受需要用computed来接收
        const modelValue = computed(()=>{
          return checkBox.modelValue
        })

        //判断是否已经被选中
        const isCheck = computed(()=>{
          const isExist = checkBox.modelValue.indexOf(props.flag) > -1
          return isExist
        })

        //点击后触发provide的方法函数
        const change = ()=>{
          checkBox.changeEvent(props.flag)
        }
        return {
          modelValue,
          isCheck,
          change
        }
      }
    }
)
</script>
